<template>
  <div>
    <h1>Test组件</h1>
    <p>{{ xxx }}</p>
    <p>计算属性: {{ bigX }}</p>
    <p>过滤器*2: {{ xxx | f }}</p>
    <button @click="handle">+</button>
    <input type="text" v-fbind="xxx" />
  </div>
</template>

<script>
// 引入混入对象
// import { hunru } from './mixin'
export default {
  // 局部混入: 只在当前组件所对应的模板中生效
  //   mixins: [hunru,其他混入对象],
  data() {
    return {
      // 如果组件内自己的数据和混入对象的数据冲突,则以组件内自己的数据为主
      xxx: 9,
    }
  },
  methods: {
    // 如果组件内自己的函数和混入对象的函数冲突,则以组件内自己的函数为主
    handle() {
      this.xxx = this.xxx + 9
    },
  },

  computed: {
    // 如果组件内自己的计算属性和混入对象的计算属性冲突,则以组件内自己的计算属性为主
    bigX() {
      return this.xxx * 100
    },
  },
  watch: {
    // 如果组件内的监视属性和混入对象的监视属性冲突,则两个监视的回调都可以执行. 先执行混入的,后执行自己的
    xxx() {
      console.log('组件内自己的监视属性----xxx的数据发生变化了')
    },
  },

  filters: {
    // 如果组件内自己的过滤器和混入对象的过滤器冲突,则以组件内自己的过滤器为主
    f(value) {
      return value * 4
    },
  },

  directives: {
    // 如果组件内自己的自定义指令和混入对象的自定义指令冲突,则以组件内自己的自定义指令为主
    fbind(element, binding) {
      element.value = binding.value * 3
    },
  },
  // 如果组件内的生命周期钩子函数和混入对象的生命周期钩子函数冲突,则两个回调都可以执行. 先执行混入的,后执行自己的
  mounted() {
    console.log('组件自己的挂载执行了')
  },
}
</script>

<style></style>
